<template>
    <p>{{count}}</p>
    <p>{{message}}</p>
    <p>{{home}}</p>
</template>
<script setup>
import {ref,reactive,toRef,toRefs} from 'vue';
/**
 * toRef可以从响应式对象中创建一个响应式的引用对象
 */
const state = reactive({
    count:0,
    message:'hello',
    home:' beijing'
});
/* 
const count = toRef(state,'count');
const message = toRef(state,'message');
const home = toRef(state,'home');
*/
//当你有一个响应式对象，
//并且你想要将其所有属性都转换为独立的响应式引用时，你可以使用 toRefs。
const {count,message,home} = toRefs(state)
state.count++;
state.message = 'world';
state.home ='shanghai'
</script>